import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, SafeAreaView, StatusBar, KeyboardAvoidingView, Platform, StyleSheet, Touchable, Image, ImageBackground } from 'react-native';
import { color_999999} from '../styles/colors';
import CustomButton from '../view/customButton';

function LoginScreen(){

    const [phone, setPhone] = useState("");
    const [code, setCode] = useState("");

    const handleLogin = () => {
        //这里添加登录逻辑
        console.log("login");
    }

    return <KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style={styles.container}>

        <ImageBackground
            source={require('./../assets/images/bg-login.png')}
        ></ImageBackground>

        <Image
            className='loginLogo'
            source={require('./../assets/images/app-logo.png')}
            style={{width: 60, height: 60}}
        ></Image>

        <TextInput
            inputMode='tel'
            keyboardType="phone-pad"
            style={styles.etPhone}
            placeholder='请输入手机号'
            onChangeText={setPhone}
            value={phone}
        />
        <TextInput
            inputMode='decimal'
            style={styles.etCode}
            placeholder='请输入验证码'
            onChangeText={setCode}
            value={code}
        />
        <CustomButton title="登录" onPress={handleLogin}/>

    </KeyboardAvoidingView>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    etPhone: {
        width: '100%',
        height: 45,
        marginHorizontal: 15,
        marginVertical: 10,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: color_999999,
        borderRadius: 10,
    },
    etCode: {
        width: '100%',
        height: 45,
        marginHorizontal: 15,
        marginVertical: 10,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: color_999999,
        borderRadius: 10,
    }
});

export default LoginScreen;